<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modelList</title>

    <link rel="stylesheet" href="../style/bootstrap.min14ed.css"/>
    <link rel="stylesheet" href="../style/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../style/sweetalert.css"/>
    <link href="../style/font-awesome.min93e3.css" rel="stylesheet">

    <link href="../style/kendo.common.min.css" rel="stylesheet">
    <link href="../style/kendo.default.min.css" rel="stylesheet">
    <link href="../style/kendo.default.mobile.min.css" rel="stylesheet">
    <link href="../style/examples-offline.css" rel="stylesheet">
    <script src="../js/env.js"></script>
    <style>
        body {
            padding: 20px;
        }

        .fixed-table-body {
            height: 560px;
            overflow: auto;
        }

        .k-switch:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="formHandle">
    <div id="editModel" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="margin-top: 12%">
            <div class="modal-content" style="padding: 20px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改文章信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input name="id" hidden>

                        <div class="form-group">
                            <label>文章标题：</label>
                            <input name="title" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>地区：</label>
                            <select id="regin" name="region" class="form-control">

                            </select>

                        </div>
                        <div class="form-group">
                            <label>作者：</label>
                            <input name="author"  class="form-control"/>
                        </div>
                        <!--<div class="form-group">
                            <label>使用状态：</label>
                            <select name="editStatus" class="form-control">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>-->
                    </form>
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-right: 30px">关闭
                    </button>
                    <button type="button" onclick="submitEdit()" data-dismiss="modal" class="btn btn-primary">保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <input name="contractId" hidden>
   <!-- <div class="row">
        <div id="type1" class="form-group col-sm-2">
            <select id="typeHandle" class="form-control" onchange="selectTypeHandle(this.value)">
                <option value="-1">所有类型</option>
                <option v-for="val in types" :value="val.typeId">{{val.text}}</option>
            </select>
        </div>
        <div id="type2" class="form-group col-sm-2" hidden>
            <select class="form-control">

            </select>
        </div>
    </div>-->
    <div class="row">
        <div class="form-group col-sm-2">
            <select id="srcId" class="form-control">

            </select>
        </div>
        <div class="form-group col-sm-10">
            <div class="col-sm-6"></div>
            <div class="col-sm-3">
                <input name="modelName" placeholder="搜索文章标题" class="form-control">
            </div>
            <div class="col-sm-2">
                <button onclick="refresh()" class="btn">搜索</button>
            </div>
            <div class="col-sm-1">
                <!--onclick="parent.addMenuTab('http://localhost:8084/page/modelAdd.html', '创建文章','modelAdd')"-->
                <button onclick="newadd()" class="btn btn-primary">新增
                </button>
            </div>

        </div>

    </div>
</div>
<table id="tbl_model"></table>

<div id="contentModel" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="height: 720px; width: 900px;padding: 60px; overflow: auto">
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<!--<script src="../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>-->
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/sweetalert.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script>
    function newadd() {
        location.href = 'introduce.html';
    }
    function refresh() {
        $('#tbl_model').bootstrapTable("refresh");
    }

    $("#tbl_model").on('load-success.bs.table', function () {
        refSwitch();
    });
    $('#tbl_model').bootstrapTable({
        url: requestUrl+'/introduce/list2',//远程数据请求地址
        striped: true,//隔行变色
        pagination: true,//显示分页条
        queryParams: queryParams,
        sidePagination: "server",
        pageSize: 10,//单页记录数
        pageList: [10],//分页步进值
        columns: [{
            field: 'title',
            title: '标题',
            align: 'center'
        }, {
            field: 'author',
            title: '作者',
            align: 'center'
        }, {
            field: 'region',
            title: '地区',
            align: 'center'
        }, {
            title: '浏览量',
            field: 'readCount',
            align: 'center'
        }, {
            title: '创建时间',
            field: 'createTime',
            align: 'center'
        }, {
            title: '使用状态',
            align: 'center',
            formatter: function (value, row, index) {

                var ele = '<input hidden type="checkbox" _modelId="' + row.id + '" class="notifications-switch" />';
                if (row.usedFlag == 1) {
                    ele = '<input hidden type="checkbox" _modelId="' + row.id + '" class="notifications-switch" checked/>';
                }
                return ele;
            }
        }, {
            field: 'operation',
            title: '操作',
            align: 'center',
            formatter: function (value, row, index) {
                var modelObj = {
                    "id": row.id,
                    "title": row.title,
                    "author": row.author,
                    "regionId": row.regionId
                };
                return [
                     "<a href=\"javascript:;\" title=\"编辑\" data-toggle=\"modal\" data-target=\"#editModel\" onclick='set(" + JSON.stringify(modelObj) + ")'><span class=\"glyphicon glyphicon-pencil\"></span></a>&nbsp;&nbsp;",
                    '<a  title="预览" data-toggle="modal" data-target="#contentModel" data-id="' + row.id + '" onclick="showContent(this)"><span class="glyphicon glyphicon-search"></span></a>&nbsp;&nbsp;',
                    '<a title="删除" onclick="delModel(this)" data-id="' + row.id + '"><span class="glyphicon glyphicon-remove"></span></a>',
                    ''
                ].join('');
            }
        }]
    });

    function queryParams(params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            offset: params.offset/10+1,  //页码
            pageSize: this.pageSize,
            title: $("input[name=modelName]").val(),
            regionId: $("#srcId").val(),
            contractId: $("input[name=contractId]").val()
        };
        return temp;
    }

    function showContent(row) {
        console.log($(row).attr("data-id"));
        var id = $(row).attr("data-id");
        $("#contentModel .modal-content").html("");
        $.get(requestUrl+"/introduce/detail", {"id": id}, function (data) {
            /* 原数据转html元素 需要在外添加一层父级元素*/
            /*var array = $("<div>"+data.content+"</div>").find("span[_id=1535535555585568]");
            var htmlStr = "";
            console.log("原数据转html元素==>>"+array.length);*/

            $("#contentModel .modal-content").html(data.result.content);
        })
    }

    function refSwitch() {
        $(".notifications-switch").kendoMobileSwitch();
        $(".k-switch").click(function () {
            var modelId = $(this).find("input").attr("_modelId");
            var status = 0;
            if ($(this).hasClass("km-switch-on") == true) {
                status = 1;
            }
            $.post(requestUrl+"/introduce/changeStatus", {"id": modelId, "status": status}, function (data) {
                if (data == false) {
                    console.log("状态更改失败");
                }
            });
        })
    }

    function set(param) {
        //$.post(requestUrl+"/showModel", {"id": modelId}, function (data) {
        $("input[name=id]").val(param.id);
        $("input[name=title]").val(param.title);
        $("input[name=author]").val(param.author);
        $("#regin").val(param.regionId);

    }

    function submitEdit() {
        var id = $("input[name=id]").val();
        var title = $("input[name=title]").val();
        var author = $("input[name=author]").val();
        var regionId = $("#regin").val();
        var formData = {
            "id": id,
            "title": title,
            "author": author,
            "regionId": regionId
        };
        $.post(requestUrl+"/introduce/update", formData, function (data) {

            if (data === true) {
                swal({title: "操作成功", text: "更新文章成功", type: "success", closeOnConfirm: false});
                refresh();
            } else {
                swal({title: "操作失败", text: "修改文章失败", type: "error", closeOnConfirm: false});
            }
        });
    }

    function delModel(row) {
        var modelId = $(row).attr("data-id");
        console.log(modelId);
        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的，我要删除！",
            cancelButtonText: "让我再考虑一下…",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {
                $.post(requestUrl+'/introduce/remove', {"id": modelId}, function (data) {
                    if (data == true) {
                        swal({title: "操作成功", text: "文章删除成功", type: "success", closeOnConfirm: false});
                        refresh();
                    } else {
                        swal({title: "操作失败", text: "文章删除失败", type: "error", closeOnConfirm: false});
                    }
                });
            } else {
                swal("已取消", "您取消了删除操作！", "error")
            }
        })

    }
    function toEditClient(modelId) {
        if (window.localStorage) {
            //存储变量的值
            localStorage.modelId = modelId;
            location.href = 'modelClient.html';
        } else {
            alert("NOT SUPPORT");
        }
    }
    function toEditRisk(modelId) {
        if (window.localStorage) {
            //存储变量的值
            localStorage.modelId = modelId;
            location.href = 'riskEdit.html';
        } else {
            alert("NOT SUPPORT");
        }
    }

    function getList() {
        $.ajax({
            url: requestUrl+"/introduce/regions",
            async: false,
            success: function (data) {
                if(data.success){
                    var arr = '<option value="-1">请选择</option>';
                    for(var i = 0;i < data.result.length;i++){
                        arr += '<option value="'+data.result[i].id+'">'+data.result[i].name+'</option>'
                    }
                    $("#srcId").html(arr);
                    $("#regin").html(arr);
                }
            },
            error: function () {

            }
        });
    }
    $("#srcId").change(function(){
        regionId = $(this).val()
    })
    var list = getList();
    new Vue({
        el: "#formHandle",
        data: {
            types: list.typeList,
            src: list.srcList,
            selectType: 1
        },
        methods: {
            selectValueHandle: function () {

            }
        }
    });

    function selectTypeHandle(val) {
        if (val > -1) {
            $.ajax({
                url: requestUrl+"/contractType/showTypeAndSrc",
                data: {"parent": val},
                async: false,
                success: function (data) {
                    var $type2 = $("#type2 select");
                    if (data.typeList.length > 0) {
                        $("#formHandle input[name=contractId]").val(-1);
                        var child = ("<option value=\"-1\">请选择</option>");
                        $("#type2").show();
                        $.each(data.typeList, function (e) {
                            child += ("<option value=" + data.typeList[e].typeId + ">" + data.typeList[e].text + "</option>");
                        });
                        $type2.html(child);
                    } else {
                        $("#type2").hide();
                        $("#formHandle input[name=contractId]").val(val)
                    }
                },
                error: function () {

                }
            });
        } else {
            $("#type2").hide();
            $("#formHandle input[name=contractId]").val(val)
        }

    }

    //
    $(function () {
        $("#type2 select").change(function () {
            $("#formHandle input[name=contractId]").val(this.value);
        });
    });

    function selectTypeHandle2(val) {
        if (val > -1) {
            $.ajax({
                url: requestUrl+"/contractType/showTypeAndSrc",
                data: {"parent": val},
                async: false,
                success: function (data) {
                    var $type2 = $("select[name=editType2]");
                    if (data.typeList.length > 0) {
                        var child = "";
                        $("select[name=editType2]").show();
                        $.each(data.typeList, function (e) {
                            child += ("<option value=" + data.typeList[e].typeId + ">" + data.typeList[e].text + "</option>");
                        });
                        $type2.html(child);
                        $("input[name=editContractId]").val($type2.find("option").eq(0).val());
                    } else {
                        $("select[name=editType2]").hide();
                        $("input[name=editContractId]").val(val)
                    }
                },
                error: function () {

                }
            });
        } else {
            $("select[name=editType2]").hide();
            $("input[name=editContractId]").val(val)
            // 操作
        }

    }

    $("select[name=editType2]").change(function () {
        $("input[name=editContractId]").val(this.value);
    });

    //批量删除
    function batchDelete() {
        //获取全部被勾选的数据行信息
        var rows = $('#tbl_user').bootstrapTable('getSelections');
        //怎么样才能将全部数据行传递到后台  List<Integer>
        var postData = {};
        if (rows.length != 0) {
            $.each(rows, function (index, obj) {
                postData["ids[" + index + "]"] = obj.id;
            });
        }
        //删除
        swal({
            title: "是否确认删除该信息?",
            text: "一旦删除,数据不可恢复",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        $.post('user/batchDelete.do', postData, function (data) {
            swal("删除成功!", {
                icon: "success",
            });
            //刷新bootstraptable
            $('#tbl_user').bootstrapTable('refresh', {url: 'user/list.do'});
        });
    }


</script>
</body>
</html>